import React, {useEffect, useState} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {User} from './data.d';
import {modulesUrl} from "@/assets/constant/modulesUrl";
import TableList from "@/assets/components/tableList";
import {hooksSet, modifyColumns} from "@/assets/utils/utils";
import {listForSelect} from "@/assets/service/baseService";
import {useRequest} from 'umi';
import {Form, Input, Tag} from "antd";

const UserList: React.FC<{}> = () => {
  const [form] = Form.useForm();
  /**
   * 获取角色列表
   */
  const getRoleSelectListRun = useRequest(() => listForSelect(modulesUrl.sysRole), {
    manual: true,
    onSuccess: (result, params) => {
      hooksSet(setColumns, modifyColumns(columns, "roleList", {fieldProps: {options: result}}));
    }
  }).run

  const [columns, setColumns] = useState<ProColumns<User>[]>([
    {
      title: '名称',
      dataIndex: 'name',
      // tip: '规则名称是唯一的 key',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
    },
    {
      title: '账号',
      dataIndex: 'loginName',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '账号为必填项',
          },
        ],
      },
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '手机号为必填项',
          },
        ],
      },
    },
    {
      title: '密码',
      dataIndex: 'password',
      hideInTable: true,
      hideInSearch: true,
      renderFormItem: (_, __, form) => {
        let id = form.getFieldValue("id");
        if (id === undefined || id.length == 0) {
          // @ts-ignore
          return <Form.Item  key={"password"} name={"password"} label={"密码"}  rules={[{required: true, message: '密码为必填项',}]}><Input.Password placeholder={"请输入密码"} autocomplete="new-password"/></Form.Item>
        } else {
          form.setFieldsValue({newPassword:""})
          // @ts-ignore
          return <Form.Item  key={"newPassword"} name={"newPassword"} label={"新密码"}><Input.Password placeholder={"请输入新密码"} autocomplete="new-password"/></Form.Item>
        }
      },
    },
    {
      title: '角色',
      dataIndex: 'roleList',
      // @ts-ignore
      valueType: "selectMultiple",
      hideInSearch: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '角色为必填项',
          },
        ],
      },
      renderText:(_, record)=>{
        let colors = {"超级管理员":"#CF134A", "需求发起人":"#108ee9", "项目负责人":"#C41DA8", "需求分派人":"#7F9E3F", "需求处理人":"#E18838"}
        return <div>{record.roleNames?.split(",")?.map((roleName)=> <Tag color={colors[roleName] || "#f50"}>{roleName}</Tag>)}</div>;
      }
    },
  ]);

  /**
   * 启动加载
   */
  useEffect(() => {
    // 获取报表列表
    getRoleSelectListRun()
  }, []);

  return (
    <TableList form={form} changeColumns={(columns: any) => hooksSet(setColumns, columns)} columns={columns}
               moduleUrl={modulesUrl.sysUser} title={"用户管理"} editInitial={(record: any, form: any) => {
      // 获取已选中的角色
      if(record.haveRoleIds){
        form.setFieldsValue({roleList: record.haveRoleIds.split(",")})
      }
    }}/>
  );
};

export default UserList;
